import { Component } from '@angular/core';
import { Article } from './share/model/article.model';
import { NzModalService } from 'ng-zorro-antd';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  public title: string;
  public link: string;

  public articles: Array<Article> = [];
  public currentArticle: Article;

  constructor(private modalService: NzModalService) {
    this.articles = [
      new Article('Angular 2', 'https://angular.cn', 10),
      new Article('NG-ZORRO', 'https://ng.ant.design', 10),
      new Article('React', 'https://react.docschina.org', 12),
      new Article('Vue', 'https://cn.vuejs.org', 15),
    ];
    this.currentArticle = this.articles[0];
  }

  public addArticle(): void {
    console.log(`Adding article title: ${this.title} and link: ${this.link}`);
    if (this.title !== '' && this.link !== '') {
      this.articles.push(new Article(this.title, this.link, 10));
      const modal = this.modalService.success({
        nzTitle: `新增文章`,
        nzContent: `Article: ${this.title} 添加成功！！！`
      });

      setTimeout(() => modal.destroy(), 3000);
    }
    this.title = '';
    this.link = '';
  }

  /**
   * 选中“文章”
   * @params selectedArticle
   */
  public selectedArticle(selectedArticle: Article): void {
    this.currentArticle = selectedArticle;
  }

  /**
   * 基于“点赞”数进行重排序
   */
  public sortArticles(): Array<Article> {
    return this.articles.sort((article1: Article, article2: Article) => article2.votes - article1.votes)
  }
}
